<template>
  <div class="box">
    <Title class="title" title="登录历史"></Title>
    <ul class="list">
      <li>
        <span>用户名</span>
        <span>IP地址</span>
        <span>操作</span>
      </li>
      <li v-for="item in userList" :class="item.baseURL === currentIp ? 'active' : ''" :key="item.token">
        <span>{{item.username}}</span>
        <span>{{item.baseURL}}</span>
        <span>
          <van-button @click="chengeBaseURL(item)" :disabled="item.baseURL === currentIp ? true : false" size="mini" type="info">{{item.baseURL === currentIp ? '当前' : '切换'}}</van-button>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
import Title from '@/components/Title'
export default {
  data () {
    return {
      userList: null,
      currentIp: localStorage.getItem('baseURL')
    }
  },
  mounted () {
    this.userList = JSON.parse(localStorage.getItem('userList'))
  },
  methods: {
    chengeBaseURL (item) {
      // 修改user
      localStorage.setItem('user', JSON.stringify(item))
      // 修改ip
      localStorage.setItem('baseURL', item.baseURL)
      // 修改token
      localStorage.setItem('token', item.token)
      this.$Notify({ type: 'success', message: '切换成功！即将重载页面，请稍等！' })
      setTimeout(() => {
        location.reload()
      }, 500)
    }
  },
  components: {
    Title
  }
}
</script>

<style lang="scss" scoped>
.box{
  padding: 0 vw(40);
  .title{
    margin: vw(50) 0;
  }
  .list{
    border-radius: vw(20);
    box-shadow: $yinying;
    overflow: hidden;
    li{
      display: flex;
      line-height: vw(90);
      font-size: vw(28);
      span{
        flex-shrink: 0;
        overflow: hidden;
        text-align: center;
        align-items: center;
        &:nth-child(1){
          flex: .5;
        }
        &:nth-child(2){
          flex: 1;
          text-align: left;
        }
        &:nth-child(3){
          flex: .4;
        }
      }
      &:nth-child(1){
        font-weight: bold;
        background: #F7FCFF;
        border-radius: vw(5);
        span:nth-child(2){
          text-align: center;
        }
      }
    }
    .active{
      background: #f2f2f2;
      border-radius: vw(5);
    }
  }
}
</style>
